<style lang="scss" scoped>
/deep/ .b-style {
  border: 1px solid #eee;
}

.item-1 {
  padding: 10px;
  .item-1-box {
    display: flex;
    justify-content: space-between;
  }
  .be-title {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 5px;
    &::before {
      content: "";
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background-color: #409eff;
      margin-right: 5px;
      vertical-align: middle;
    }
  }
  .flex-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

.item-4 {
  display: flex;
  height: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  .item4-box {
    display: flex;
    align-items: center;
  }
  .circle-box {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    line-height: 90px;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    &::after {
      content: "";
      position: absolute;
      background-color: #f1f1f1;
      top: 5px;
      left: 5px;
      display: inline-block;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      z-index: -1;
    }
    &.border-1 {
      border: 5px solid #409eff;
      color: #409eff;
      &::after {
        border: 1px solid #409eff;
      }
    }
    &.border-2 {
      border: 5px solid #f56c6c;
      color: #f56c6c;
      &::after {
        border: 1px solid #f56c6c;
      }
    }
    &.border-3 {
      border: 5px solid #e6a23c;
      color: #e6a23c;
      &::after {
        border: 1px solid #e6a23c;
      }
    }
    &.border-4 {
      border: 5px solid #6f7ad3;
      color: #6f7ad3;
      &::after {
        border: 1px solid #6f7ad3;
      }
    }
  }
}

.item-5{
  height: 100%;
  background: url('./5.png') no-repeat center;
  background-size:100% 99.9%; 
}
</style>
<template>
  <ui-main no-padding>
    <ui-layout
      v-model="dataList"
      :verticalCompact="verticalCompact"
      :isDraggable="isDraggable"
      :isResizeble="isResizeble"
      diyClass="b-style"
      style="backgroundColor: #f1f1f1"
    >
      <template v-slot:toolbar="scope">
        <i class="icon redo" title="刷新" @click.stop="redo(item)"></i>
      </template>

      <template v-slot:title="scope">
        <span class="t-black">{{scope.data.title}}</span>
      </template>

      <template slot-scope="item">
        <template v-if="item.data.i == 1">
          <div class="item-1">
            <h4>
              <i class="map marker alternate icon t-blue"></i> 化学厂 周三 2月26日
            </h4>
            <div class="item-1-box">
              <div class="p-10">
                <p>
                  <b>空气质量</b>
                </p>
                <p class="be-title">首要污染物</p>
                <p class="t-red f-12">PM2.5</p>
                <p class="be-title">空气质量等级</p>
                <p class="t-red f-12">三级</p>
              </div>
              <div class="w-50p">
                <ui-echarts :option="gauge"></ui-echarts>
              </div>
              <div class="p-10 w-25p">
                <p>
                  <b>主要污染物</b>
                </p>
                <div class="flex-box">
                  <div class="w-40p">
                    <p>PM2.5</p>
                    <el-progress :percentage="80" :color="customColorMethod" :show-text="false"></el-progress>
                  </div>
                  <div class="w-40p">
                    <p>PM10</p>
                    <el-progress :percentage="60" :color="customColorMethod" :show-text="false"></el-progress>
                  </div>
                  <div class="w-40p">
                    <p>Q3</p>
                    <el-progress :percentage="25" :color="customColorMethod" :show-text="false"></el-progress>
                  </div>
                  <div class="w-40p">
                    <p>NO2</p>
                    <el-progress :percentage="50" :color="customColorMethod" :show-text="false"></el-progress>
                  </div>
                  <div class="w-40p">
                    <p>SO2</p>
                    <el-progress :percentage="15" :color="customColorMethod" :show-text="false"></el-progress>
                  </div>
                  <div class="w-40p">
                    <p>CO</p>
                    <el-progress :percentage="2" :color="customColorMethod" :show-text="false"></el-progress>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>

        <template v-if="item.data.i == 2">
          <ui-echarts :option="line"></ui-echarts>
        </template>

        <template v-if="item.data.i == 3">
          <el-table :data="tableData" height="100%">
            <el-table-column prop="date" label="下井日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="所处矿洞编号"></el-table-column>
            <el-table-column prop="feedback" label="反馈情况"></el-table-column>
          </el-table>
        </template>

        <template v-if="item.data.i == 4">
          <div class="item-4">
            <div class="item4-box">
              <div class="circle-box border-1">822.30</div>
              <div class="p-10">
                <h4>实时液位</h4>
                <p class="f-12">单位：mm</p>
              </div>
            </div>
            <div class="item4-box">
              <div class="circle-box border-2">18.2</div>
              <div class="p-10">
                <h4>实时温度</h4>
                <p class="f-12">单位：℃</p>
              </div>
            </div>
            <div class="item4-box">
              <div class="circle-box border-3">9.25</div>
              <div class="p-10">
                <h4>实时压力</h4>
                <p class="f-12">单位：kpa</p>
              </div>
            </div>
            <div class="item4-box">
              <div class="circle-box border-4">46</div>
              <div class="p-10">
                <h4>实时存量</h4>
                <p class="f-12">单位：t</p>
              </div>
            </div>
          </div>
        </template>

        <template v-if="item.data.i == 5">
          <div class="item-5"></div>
        </template>

        <template v-if="item.data.i == 6">
          <ui-echarts :option="line2"></ui-echarts>
        </template>
      </template>
    </ui-layout>
  </ui-main>
</template>
<script>
export default {
  data() {
    return {
      dataList: [
        { h: 7, i: "1", w: 6, x: 6, y: 0, title: "空气质量指数" },
        { h: 11, i: "2", w: 8, x: 0, y: 7, title: "井下空气质量实时检测" },
        { h: 8, i: "3", w: 6, x: 6, y: 14, title: "员工状态" },
        { h: 11, i: "4", w: 4, x: 8, y: 7, title: "危险源监测" },
        { h: 7, i: "5", w: 6, x: 0, y: 0, title: "一周天气预报" },
        { h: 8, i: "6", w: 6, x: 0, y: 14, title: "开采效率一览图" }
      ],
      isDraggable: true,
      isResizeble: true,
      verticalCompact: true,
      bar3: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ["贵阳", "六盘水", "六枝"]
        },
        grid: {
          width: "95%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["周一", "周二", "周三", "周四", "周五"]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "按时完成",
            type: "bar",
            data: [3, 332, 301, 334, 390, 330, 320]
          },
          {
            name: "提前完成",
            type: "bar",
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: "延期完成",
            type: "bar",
            data: [150, 232, 201, 154, 190, 330, 410],
            itemStyle: {
              color: "#13C2C2"
            }
          }
        ]
      },
      gauge: {
        tooltip: {
          formatter: "{a} <br/>{c} {b}"
        },
        series: [
          {
            type: "gauge",
            min: 0,
            max: 100,
            splitNumber: 10,
            radius: "90%",
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: [
                  [0.3, "#01D68F"],
                  [0.7, "#E6A23C"],
                  [1, "#F56C6C"]
                ],
                width: 5,
                shadowColor: "#fff", //默认透明
                shadowBlur: 10
              }
            },
            axisTick: {
              // 坐标轴小标记
              length: 0 // 属性length控制线长
            },
            splitLine: {
              // 分隔线
              length: 8, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                width: 2,
                color: "auto"
              }
            },
            axisLabel: {
              show: false
            },
            title: {
              offsetCenter: [0, "40%"],
              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontSize: 14,
                color: "#67C23A",
                shadowColor: "#fff", //默认透明
                shadowBlur: 10
              }
            },
            detail: {
              shadowColor: "#fff", //默认透明
              shadowBlur: 2,
              offsetCenter: [0, 0], // x, y，单位px
              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: "bolder",
                color: "#01D68F",
                fontSize: 40
              }
            },
            pointer: {
              width: 4
            },
            data: [{ value: 20, name: "轻度污染" }]
          }
        ]
      },
      data1: (() => {
        let res = [];
        let len = 100;
        while (len--) {
          res.push(Math.random() * 20 + 5);
        }
        return res;
      })(),
      data2: (() => {
        let res = [];
        let len = 100;
        while (len--) {
          res.push(Math.random() * 50 + 50);
        }
        return res;
      })(),
      data3: (() => {
        let res = [];
        let len = 100;
        while (len--) {
          res.push(Math.random() * 50 + 20);
        }
        return res;
      })(),
      xData: (() => {
        let now = new Date();
        let res = [];
        let len = 100;
        while (len--) {
          res.unshift(now.toLocaleTimeString().replace(/^\D*/, ""));
          now = new Date(now - 1000);
        }
        return res;
      })(),
      line2Data: [Math.random() * 300],
      line2Date: [],
      tableData: [{
          date: '2020-2-24',
          name: '小明',
          address: '00052143采掘区',
          feedback: '一切正常'
        }, {
          date: '2020-2-22',
          name: '小虎',
          address: '0002134采掘区',
          feedback: '一切正常'
        }, {
          date: '2020-2-20',
          name: '小黄',
          address: '0001242采掘区',
          feedback: '需要更换氧气瓶'
        }, {
          date: '2020-2-16',
          name: '小绿',
          address: '0001233采掘区',
          feedback: '即将回到地面'
        }, {
          date: '2020-2-16',
          name: '小白',
          address: '0001233采掘区',
          feedback: '即将回到地面'
        }, {
          date: '2020-2-16',
          name: '小黑',
          address: '0001233采掘区',
          feedback: '即将回到地面'
        }, {
          date: '2020-2-16',
          name: '小蓝',
          address: '0001233采掘区',
          feedback: '即将回到地面'
        }
      ]
    };
  },
  mounted() {
    setInterval(() => {
      let axisData = new Date().toLocaleTimeString().replace(/^\D*/, "");
      this.data1.shift();
      this.data1.push(Math.random() * 20 + 5);
      this.data2.shift();
      this.data2.push(Math.random() * 50 + 50);
      this.data3.shift();
      this.data3.push(Math.random() * 50 + 30);
      this.xData.shift();
      this.xData.push(axisData);
    }, 1000);

    var base = +new Date(1968, 9, 3);
    var oneDay = 24 * 3600 * 1000;

    for (var i = 1; i < 20000; i++) {
      var now = new Date((base += oneDay));
      this.line2Date.push(
        [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
      );
      this.line2Data.push(
        Math.abs(Math.round((Math.random() - 0.5) * 20 + this.line2Data[i - 1]))
      );
    }
  },
  methods: {
    customColorMethod(percentage) {
      if (percentage < 30) {
        return "#67C23A";
      } else if (percentage < 70) {
        return "#E6A23C";
      } else {
        return "#F56C6C";
      }
    }
  },
  computed: {
    line() {
      return {
        legend: {
          bottom: 10,
          data: ["一氧化碳含量", "氧气含量", "粉尘含量"]
        },
        tooltip: {
          trigger: "axis",

          axisPointer: {
            animation: false
          }
        },
        xAxis: {
          type: "category",
          data: this.xData,
          boundaryGap: false
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: "一氧化碳含量",
            type: "line",
            lineStyle: {
              color: "#F56C6C"
            },
            smooth: true,
            showSymbol: false,
            hoverAnimation: false,
            data: this.data1,
            markLine: {
              silent: true,
              data: [
                {
                  yAxis: 5
                },
                {
                  yAxis: 20
                },
                {
                  yAxis: 23
                }
              ]
            }
          },
          {
            name: "氧气含量",
            type: "line",
            lineStyle: {
              color: "#409eff"
            },
            smooth: true,
            showSymbol: false,
            hoverAnimation: false,
            data: this.data2,
            markLine: {
              silent: true,
              data: [
                {
                  yAxis: 60
                },
                {
                  yAxis: 70
                },
                {
                  yAxis: 99
                }
              ]
            }
          },
          {
            name: "粉尘含量",
            type: "line",
            lineStyle: {
              color: "#E6A23C"
            },
            smooth: true,
            showSymbol: false,
            hoverAnimation: false,
            data: this.data3,
            markLine: {
              silent: true,
              data: [
                {
                  yAxis: 30
                },
                {
                  yAxis: 55
                },
                {
                  yAxis: 65
                }
              ]
            }
          }
        ]
      };
    },
    line2() {
      return {
        tooltip: {
          trigger: "axis",
          position: function(pt) {
            return [pt[0], "10%"];
          }
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: "none"
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.line2Date
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "100%"]
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 10
          },
          {
            start: 0,
            end: 10,
            handleIcon:
              "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
            handleSize: "80%",
            handleStyle: {
              color: "#fff",
              shadowBlur: 3,
              shadowColor: "rgba(0, 0, 0, 0.6)",
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          }
        ],
        series: [
          {
            name: "模拟数据",
            type: "line",
            smooth: true,
            symbol: "none",
            sampling: "average",
            itemStyle: {
              color: "rgb(255, 70, 131)"
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgb(255, 158, 68)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgb(255, 70, 131)" // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            data: this.line2Data
          }
        ]
      };
    }
  }
};
</script>